<div class="pageDiv" th:fragment="html" xmlns:th="http://www.w3.org/1999/xhtml" id="page">
    <nav>
        <ul data-am-widget="pagination"
            class="am-pagination am-pagination-default">
            <li class="am-pagination-first">
                <a :class="{ 'disabled': pagination.first }" href="#nowhere" @click="jump('first')">«</a>
            </li>
            <li class="am-pagination-prev">
                <a :class="{ 'disabled': !pagination.hasPrevious }" href="#nowhere" @click="jump('pre')">‹</a>
            </li>

            <li class="am-pagination-centered disabled">
                <a v-if="pagination.current >= 3 && pagination.totalPages > 3">...</a>
            </li>
            <li  v-for="i in pagination.pageLimitNums" class="am-pagination-centered">
                <a href="#nowhere" @click="jumpByNumber(i-1)" :id="i" class="page-num" style="background-color: #eee;" v-if="(i == 1 && pagination.current == 1) || (i == pagination.totalPages && pagination.current == pagination.totalPages)">
                    {{i}}
                </a>
                <a href="#nowhere" @click="jumpByNumber(i-1)" :id="i" class="page-num" v-else>
                    {{i}}
                </a>
            </li>
            <li class="am-pagination-centered disabled">
                <a v-if="pagination.current < pagination.totalPages-1 && pagination.totalPages > 3">...</a>
            </li>

            <li class="am-pagination-next">
                <a :class="{ 'disabled': !pagination.hasNext }" href="#nowhere" @click="jump('next')">›</a>
            </li>
            <li class="am-pagination-last">
                <a :class="{ 'disabled': pagination.last }" href="#nowhere" @click="jump('last')">»</a>
            </li>
        </ul>
    </nav>
</div>